<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>场景秀</title>
  <!--<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">-->
  <meta name="viewport" content="width=device-width,user-scalable=no" />
  <link rel="stylesheet" type="text/css" href="css/css.css">
</head>

<body>
  <div class="music" onclick="playPause();">&nbsp;</div>
  <audio id="music" loop preload="preload">
    <source src="images/music.mp3" type="audio/mpeg"> 你不支持HTML5，快去换浏览器吧
  </audio>
  <div class="container active">
    <img src="images/text.png" class="text">
    <img src="images/ice.png" class="ice">
    <img src="images/first-fish.png" class="first-fish">
    <img src="images/second-fish.png" class="second-fish">
    <img src="images/fish.png" class="fish">
    <img src="images/weixin.png" class="weixin">
    <img src="images/bubble.png" class="bubble">
    <div class="water"></div>
  </div>
</body>

</html>
<script>
  var Media = document.getElementById("music")
  var bg = document.getElementsByClassName('music')[0]
  // Media.play();
  function playPause() {
    if (Media.paused) {
      bg.className = 'music active'
      Media.play(); //播放  
    } else {
      bg.className = 'music'
      Media.pause(); //暂停
    }
  }

</script>
